<template>
  <div class="container">
    <el-container>
      <el-header>
        <div style="width: 200px">头像</div>
        <div class="top-menu">
          <div>
            <el-menu
              :default-active="activeIndex + ''"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#2b83f9"
              text-color="#ccc"
              active-text-color="#fff"
              @select="selectInd"
            >
              <el-menu-item
                :index="index | numToString"
                v-for="(item, index) in this.menuList"
                :key="index"
              >
                <template slot="title">
                  <i></i>
                  <span>{{ item.title }}</span>
                </template>
              </el-menu-item>
            </el-menu>
          </div>

          <div class="userLogin" @click="tabShow">
            <img src="../assets/img1.jpg" />
            <i class="el-icon-caret-bottom"></i>
          </div>
          <!-- 退出 -->
          <div class="box-card" v-show="showBox">
            <div class="clearfix">
              <div class="user-avatar">
                <img
                  style="width: 32px; height: 32px; border-radius: 50%"
                  src="../assets/img1.jpg"
                />
              </div>
              <div class="user-name">超级管理员</div>
            </div>
            <div class="setting">
              <div>
                <div class="icon">
                  <i class="el-icon-s-tools"></i>
                </div>
                <div>
                  <span>账号设置</span>
                </div>
              </div>
              <div>
                <div class="icon">
                  <i class="el-icon-s-tools"></i>
                </div>
                <div>
                  <span @click="loginOut">退出登录</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#fff"
            active-text-color="#2b83f9"
            router
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
            </el-submenu>

            <el-menu-item
              :index="item.menu_url"
              v-for="(item, ind) in leftMenuList"
              :key="ind"
            >
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="user-router">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/Student' }"
                ><span style="font-size: 18px; color: #8f8f8f; font-weight: bold"
                  >学员管理</span
                >
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="router">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import common from "../assets/common/mixins.js";
export default {
  // 注册公共组件
  mixins: [common],
  // 组件名称
  name: "demo",
  // 组件状态值
  data() {
    return {
      menuList: {},
      showBox: false,
      activeIndex: 0,
      leftMenuList: [],
      nums: 0,
    };
  },
  // 组件方法
  methods: {
    tabShow() {
      this.showBox = !this.showBox;
    },
    // 获取左侧和顶部数据
    async getUserMenus() {
      try {
        const { data: res } = await this.$http.post("menu/info");
        if (res.code !== 200) {
          return this.$message.error(res.msg);
        }
        this.menuList = res.rows;
      } catch (e) {
        this.$message.error(e);
      }
    },
    selectInd(ind) {
      console.log(ind);
      this.activeIndex = ind;
      this.nums = Number(ind);
      this.leftMenuList = this.menuList[this.nums].children;
	  console.log(this.leftMenuList)
    },
    loginOut() {
      this.$confirm("确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("school_token");
          this.$router.push("/Login");
          this.$message.success("退出成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
  /**
   * 组件实例创建完成
   */
  created() {
    this.getUserMenus();
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;

  .el-container {
    position: relative;

    .el-header {
      display: flex;
      align-items: center;
      background-color: #2b83f9;

      .top-menu {
        display: flex;

        .el-menu {
          .el-menu-item {
            i {
              color: #efefef;
            }
          }
        }

        .userLogin {
          position: absolute;
          right: 20px;
          top: 15px;
          display: flex;
          align-items: center;

          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          i {
            font-size: 24px;
            color: #efefef;
          }
        }

        .box-card {
          position: absolute;
          right: 5px;
          top: 65px;
          width: 240px;
          padding: 0;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          border-radius: 4px;
          transition: transform 0.2s;
          z-index: 999;
          background-color: #ffffff;

          .clearfix {
            display: flex;
            height: 68px;
            align-items: center;
            border-bottom: 1px solid #efefef;

            .user-avatar {
              width: 68px;
              text-align: center;
            }

            .user-name {
              font-size: 14px;
              color: #2185f0;
              line-height: 36px;
            }
          }

          .setting {
            div {
              cursor: pointer;
              display: flex;
              align-items: center;
              height: 48px;
              line-height: 48px;

              .icon {
                width: 68px;
                text-align: center;
                display: flex;
                justify-content: center;
                font-size: 20px;
                color: #888888;
              }

              span {
                font-size: 12px;
                color: #888888;
              }
            }

            div:hover {
              background-color: #efefef;
            }
          }
        }
      }
    }

    .el-container {
      display: flex;
      flex: 1;

      .el-aside {
      }

      .el-menu {
        height: 100%;
      }

      .el-main {
        padding: 0px;
        flex: 1;

        .user-router {
          padding: 20px 20px 0px;
          box-sizing: border-box;
          border-bottom: 1px solid #cccccc;
          background-color: #ffffff;
        }

        .router {
          padding: 5px 10px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
